
<template>
    <van-nav-bar
        title="我的地址"
        left-arrow
        @click-left="router.go(-1)"
        />
    <van-address-list
        v-model="defaultAddr"
        :list="list"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        @add="addEvt"
    />

    
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { useRouter } from "vue-router";
import { userAddressApi } from "../../../apis/addressApis";
import { useCommonStore } from "../../../store";
const router = useRouter()
const defaultAddr: Ref<string> = ref('1');
const list:Ref<Array<addsInf>> = ref([])

interface addsInf{
    id: string,
    name: string,
    tel: string,
    address: string,
    isDefault?: boolean,
}

// 获取我的收获地址数据
const uid:string = useCommonStore().userInfo.id
getAddressList()
async function getAddressList(){
  let _res = await userAddressApi(uid)
  if(_res.code == 200){
    list.value = _res.data.map((it:any,i:number)=>{ 
      it.id=i+1
      it.tel = it.phone
      if(it.id==1) it.isDefault = true
      return it
    })
  }
  console.log(list.value);
  
}

    // 新增地址
    function addEvt(){
      router.push('/add')
      // console.log(1111111);
      
    }
</script>

<style lang="less" scoped>
@import url('../../../style/comon.less');
::v-deep .van-icon-arrow-left:before{
    color: @g9;
    font-size: .9rem;
}
::v-deep .van-button--block{
    background-image: linear-gradient(to right, #bcff00, #33d900);
    border: none;
}
::v-deep .van-address-list__bottom {
    height: 10vh;
    padding: .5rem .8rem;
}
::v-deep .van-address-item__tag{
  background-color: @g8;
}
::v-deep .van-address-item .van-radio__icon--checked .van-icon{
  background-color: @g8;
}
</style>